<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ taglib tagdir="/WEB-INF/tags" prefix="mytags" %>
 
  <%@page import="csc.traning.wpsj.dao.DirectoryLevel"%>
 <%@page import="csc.traning.wpsj.dao.FileInformation"%>
<%@page import="java.util.*;"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="scripts/jquery-1.6.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#createfolderform").hide();	
		$("#createfolder").click(function() {
				$("#createfolderform").toggle();
		});
		$('#select_all').change(function() {
				    var checkboxes = $(this).closest('form').find(':checkbox');
				    if($(this).is(':checked')) {
				        checkboxes.attr('checked', 'checked');
				    } else {
				        checkboxes.removeAttr('checked');
				    }
		});
		
	});
</script>

<script type="text/javascript">
function deleteFile(){
	document.getElementById("delete-download-file").submit();					
}
function downloadFile(){
	document.getElementById("delete-download-file").action="file-download";
	document.getElementById("delete-download-file").submit();					
}
function checksubmitUpload(){
	var upload = document.getElementById("upfile");
	if (upload.value != ""){
		document.getElementById('myuploadform').submit();
	}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
	<SCRIPT LANGUAGE="javascript" SRC="scripts/ajax-utils.js"></SCRIPT>
	<SCRIPT LANGUAGE="javascript" SRC="scripts/ajax-calls.js"></SCRIPT>
	<script type="text/javascript">
		setInterval(updateNumOfOnline, 10000);
	</script>
	<div style="width: 1000px; height: 50px; text-align: right;">
		Welcome <b>${user.userName}</b>, <a href="logout">Logout</a>
	</div>
	<div style="width: 1000px">
		<div style="float: left; width: 200px; text-align: left;">
			<div>
				<fieldset style="height: 200px; background: #EFEDFC">
					<legend style="color: graytext; font-weight: bold;">Common
						Information</legend>
					<p style="font-size: 14">Capacity: ${percent}% in use</p>
					<p style="font-size: 14">
					<div id="numOfOnline">Currently online: ${numOfOnline }</div>
					</p>

				</fieldset>
			</div>
			<div>
				<fieldset style="height: 200px; background: #EFEDFC">
					<legend style="color: graytext; font-weight: bold;">User
						Profiles</legend>
					<p style="font-size: 14">${user.firstName}${user.lastName}</p>
					<p style="font-size: 14">${user.cellphone}</p>
					<p style="font-size: 14">${user.emailAddress}</p>
					<br />
					<p style="font-size: 14; text-align: right">
						<a href="edit-profile">Edit Profiles</a>
					</p>
				</fieldset>
			</div>
		</div>

		<div style="float: left; width: 800px;">
			<fieldset style="min-height: 500px;">
				<legend style="color: graytext; font-weight: bold;">Files
					Uploaded</legend>
				<br />
				<div>
					<form action="my-file-upload-action" id="myuploadform" enctype="multipart/form-data" method="post">
						<input type="file" name="uploadFile" id="upfile">
						<input type="submit" value="Upload"style="display: none;">
					</form>
				</div>
				<div style="border-bottom: 1px; border-bottom-style: solid;">
					<input type="button" id="upload" name="upload" value="Upload" onclick="checksubmitUpload();"> 
					<input type="button" name="delete" value="Delete" onclick="deleteFile();"> 
					<input type="button" name="download" value="Download" onclick="downloadFile();"> 
					<input type="button" id="createfolder" name="createfolder" value="Create folder">
					<form action="create-folder" id="createfolderform" method="post" style="display: inline;">
						<input type="text" name="folderName" >
						<input type="submit" value="AddFolder">
					</form>
				</div>

				<div>
					<p style="font-size: 14">
						<c:forEach var="l" items="${level}">
							<c:choose>
								<c:when test="${l.name  == 'root'}">
									<a href="file-management">${l.name}</a>
								</c:when>
								<c:otherwise>
									/<a href="file-management?subdir=${l.path}">${l.name}</a>
								</c:otherwise>
							</c:choose>
						</c:forEach>
					</p>
					<form action="delete-file" method="post" id="delete-download-file" name="deletefile">
					<table style="font-size: 13">
						<tr align="left">
							<th><input type="checkbox" id="select_all"></th>
							<th width="450px;">File Name</th>
							<th width="100px;">Kind</th>
							<th width="100px;">Size</th>
							<th width="150px;">Modified</th>

						</tr>
						
						<c:forEach  var="e" items="${fileInfo}">
							<tr align="left">
								<td><input type="checkbox" value="${e.path}/${e.name}" name="fileSelect"></td>
								<td>
								<c:choose>
									<c:when test="${e.isDirectory}">

										<a href="file-management?subdir=${e.path}/${e.name}">${e.name}</a>
									</c:when>
									
									<c:otherwise>
										${e.name}
									</c:otherwise>
								</c:choose>
								<td>
								<c:choose>
									<c:when test="${e.isDirectory}">
									Folder
									</c:when>
									<c:otherwise>
									File
									</c:otherwise>
								</c:choose>
								</td>
								<td>
									<c:if test="${e.isDirectory == false}">${e.size}</c:if>
								</td>
								<td>${e.modified}</td>
							</tr>
						</c:forEach>
					</table>
					</form>
				</div>
			</fieldset>
		</div>

	</div>
</body>
</html>